<template>
  <el-dialog title="用户信息" :visible.sync="addDialogVisible" width="55%">
    <el-form ref="userInfos" :rules="rules" :inline="true" :model="userInfos" class="demo-ruleForm" style="height:400px;overflow-y:scroll">
      <el-row>
        <el-col :span="11">
          <el-form-item style="padding: 2%" label="工号" prop="code" :label-width="Lwidth">
            <el-input v-model="userInfos.code" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item style="padding: 2%" label="用户名" prop="name" :label-width="Lwidth">
            <el-input v-model="userInfos.name" autocomplete="off" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item style="padding: 2%" label="性别" prop="sex" :label-width="Lwidth">
            <el-radio-group v-model="userInfos.sex">
              <el-radio :label="0">男</el-radio>
              <el-radio :label="1">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="密码" style="padding: 2%" prop="password" :label-width="Lwidth">
            <el-input v-model="userInfos.password" autocomplete="off" show-password />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item style="padding: 2%" label="所属部门" prop="departmentId" :label-width="Lwidth">
            <el-select
              v-model="userInfos.departmentId"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in optionsDepartment"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item style="padding: 2%" label="职位" prop="positionId" :label-width="Lwidth">
            <el-select
              v-model="userInfos.positionId"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in optionsPosition"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select></el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item style="padding: 2%" label="电话" prop="tel" :label-width="Lwidth">
            <el-input v-model="userInfos.tel" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item style="padding: 2%" label="邮箱" prop="email" :label-width="Lwidth">
            <el-input v-model="userInfos.email" autocomplete="off" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item style="padding: 2%" label="拥有角色" prop="roleList" :label-width="Lwidth">
            <el-select
              v-model="userInfos.roleList"
              multiple
              value-key="roleList"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in optionsRole"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select></el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item style="padding: 2%" label="其他联系" :label-width="Lwidth">
            <el-input v-model="userInfos.other" autocomplete="off" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="11">
          <el-form-item style="padding: 2%" label="生日" :label-width="Lwidth">
            <el-date-picker v-model="userInfos.birthday" type="date" placeholder="选择日期" />
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item style="padding: 2%" label="备注" :label-width="Lwidth">
            <el-input v-model="userInfos.remark" autocomplete="off" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="addUserOK">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'AddDialog',
  props: {
    addDialogVisible: {
      require: true,
      type: Boolean,
      default: () => {
        return false
      }
    },
    rules: {
      require: true,
      type: Object,
      default: () => {
        return {}
      }
    },
    userInfos: {
      require: true,
      type: Object,
      default: () => {
        return {}
      }
    },
    optionsDepartment: {
      require: true,
      type: Array,
      default: () => {
        return []
      }
    },
    optionsPosition: {
      require: true,
      type: Array,
      default: () => {
        return []
      }
    },
    optionsRole: {
      require: true,
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      Lwidth: '80px'
    }
  },
  methods: {
    closeDialog() {
      this.$emit('closeDialog')
    },
    addUserOK() {
      this.$emit('addUserOK')
    }
  }
}
</script>

<style scoped lang="scss">

</style>
